<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安心银行 - 个人中心</title>
    <style>
        /* 继承首页样式，仅添加个人中心特有样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "微软雅黑", sans-serif;
            color: #333;
            scroll-behavior: smooth;
        }

        /* 导航栏样式 - 与首页一致 */
        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            transition: background-color 0.3s, box-shadow 0.3s;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .nav.scrolled {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .nav .logo {
            display: flex;
            align-items: center;
        }
        .nav .logo img {
            height: 30px;
            margin-right: 5px;
        }
        .nav .menu a {
            margin: 0 10px;
            text-decoration: none;
            color: #333;
            position: relative;
            transition: color 0.3s;
        }
        .nav .menu a:hover {
            color: #007bff;
        }
        .nav .menu a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #007bff;
            transition: width 0.3s;
        }
        .nav .menu a:hover::after {
            width: 100%;
        }
        .nav .btn-group a {
            margin-left: 10px;
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .nav .btn-logout {
            color: #fff;
            background-color: #dc3545;
            border: 1px solid #dc3545;
        }
        .nav .btn-logout:hover {
            background-color: #bd2130;
            border-color: #bd2130;
        }

        /* 个人中心主要样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .user-profile {
            background: linear-gradient(to right, #0099ff, #66ccff);
            color: #fff;
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }

        .user-profile::after {
            content: '';
            position: absolute;
            right: -100px;
            bottom: -100px;
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            margin-right: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .user-info h2 {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .user-info p {
            font-size: 14px;
            opacity: 0.9;
        }

        .account-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }

        .summary-item {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 15px 20px;
            border-radius: 6px;
            flex: 1 1 200px;
            min-width: 150px;
        }

        .summary-item h4 {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 5px;
        }

        .summary-item p {
            font-size: 20px;
            font-weight: bold;
            margin: 0;
        }

        .function-menu {
            padding: 30px 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .function-menu h2 {
            font-size: 24px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .function-menu h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background-color: #007bff;
        }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
        }

        .menu-item {
            background-color: #fff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
        }

        .menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .menu-item i {
            font-size: 36px;
            color: #007bff;
            margin-bottom: 15px;
        }

        .menu-item h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .menu-item p {
            font-size: 12px;
            color: #666;
            margin: 0;
        }

        .recent-transactions {
            padding: 30px 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .transactions-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .transactions-header h2 {
            font-size: 24px;
            margin: 0;
            position: relative;
            padding-bottom: 10px;
        }

        .transactions-header h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background-color: #007bff;
        }

        .view-more {
            color: #007bff;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .view-more:hover {
            color: #0056b3;
        }

        .transaction-list {
            list-style: none;
        }

        .transaction-item {
            padding: 15px 0;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .transaction-item:last-child {
            border-bottom: none;
        }

        .transaction-info {
            display: flex;
            align-items: center;
        }

        .transaction-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 18px;
        }

        .transaction-icon.deposit {
            background-color: #d4edda;
            color: #155724;
        }

        .transaction-icon.withdraw {
            background-color: #f8d7da;
            color: #721c24;
        }

        .transaction-icon.transfer {
            background-color: #cce5ff;
            color: #004085;
        }

        .transaction-details h4 {
            font-size: 14px;
            margin: 0 0 5px 0;
        }

        .transaction-details p {
            font-size: 12px;
            color: #666;
            margin: 0;
        }

        .transaction-amount {
            font-size: 16px;
            font-weight: bold;
        }

        .transaction-amount.income {
            color: #155724;
        }

        .transaction-amount.expense {
            color: #721c24;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .profile-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .user-avatar {
                margin-bottom: 15px;
            }

            .menu-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .menu-grid {
                grid-template-columns: 1fr;
            }

            .account-summary {
                flex-direction: column;
            }

            .summary-item {
                margin-bottom: 15px;
            }
        }

        /* 动画效果 - 与首页一致 */
        @keyframes fadeUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* 提示框样式 - 与首页一致 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            z-index: 300;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .toast.active {
            opacity: 1;
        }
    </style>
    <!-- 引入字体图标 - 与首页一致 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 导航栏滚动效果 - 与首页一致
            window.addEventListener('scroll', function() {
                const nav = document.querySelector('.nav');
                if (window.scrollY > 50) {
                    nav.classList.add('scrolled');
                } else {
                    nav.classList.remove('scrolled');
                }
                // 滚动动画
                revealElements();
            });

            // 滚动显示动画 - 与首页一致
            function revealElements() {
                const reveals = document.querySelectorAll('.reveal');
                const windowHeight = window.innerHeight;
                reveals.forEach(element => {
                    const elementTop = element.getBoundingClientRect().top;
                    const elementVisible = 150;
                    if (elementTop < windowHeight - elementVisible) {
                        element.classList.add('active');
                    }
                });
            }

            // 初始加载时检查元素位置 - 与首页一致
            revealElements();

            // 平滑滚动 - 与首页一致
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });

            // 创建提示框 - 与首页一致
            const toast = document.createElement('div');
            toast.className = 'toast';
            document.body.appendChild(toast);

            // 显示提示框 - 与首页一致
            function showToast(message) {
                toast.textContent = message;
                toast.classList.add('active');
                setTimeout(() => {
                    toast.classList.remove('active');
                }, 2000);
            }

            // 退出登录
            const logoutBtn = document.querySelector('.btn-logout');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', () => {
                    if (confirm('确定要退出登录吗？')) {
                        localStorage.removeItem('isLoggedIn');
                        // 跳转到登录页面
                        window.location.href = 'login.html'; // 假设登录页面为login.html
                    }
                });
            }

            // 功能菜单点击事件
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    const functionName = item.querySelector('h3').textContent;
                    showToast(`正在进入${functionName}功能...`);

                    // 根据功能名称跳转到对应的HTML页面
                    const functionMap = {
                        '快捷转账': 'transfer.html',
                        '账户查询': 'account-inquiry.html',
                        '在线还款': 'repayment.html',
                        '流水打印': 'statement.html',
                        '信息修改': 'profile-edit.html',
                        '账户挂失': 'account-freeze.html',
                        '余额充值': 'recharge.html',
                        '投资理财': 'investment.html'
                    };

                    const targetPage = functionMap[functionName] || 'function.html';
                    setTimeout(() => {
                        window.location.href = targetPage; // 跳转到对应功能页面
                    }, 1000);
                });
            });

            // 模拟从数据库获取用户信息 (实际应用中应通过API获取)
            function fetchUserInfo() {
                // 模拟异步获取用户信息
                setTimeout(() => {
                    const userInfo = {
                        username: '张三',
                        phone: '138****5678',
                        avatar: 'https://picsum.photos/200/200?random=101', // 预留头像接口
                        accountBalance: '12,856.50',
                        savingsBalance: '56,780.00',
                        creditLimit: '50,000.00'
                    };

                    // 填充用户信息
                    document.querySelector('.user-avatar').textContent = userInfo.username.charAt(0);
                    document.querySelector('.user-info h2').textContent = userInfo.username;
                    document.querySelector('.user-info p').textContent = userInfo.phone;

                    // 填充账户余额信息
                    document.querySelectorAll('.summary-item p')[0].textContent = '¥ ' + userInfo.accountBalance;
                    document.querySelectorAll('.summary-item p')[1].textContent = '¥ ' + userInfo.savingsBalance;
                    document.querySelectorAll('.summary-item p')[2].textContent = '¥ ' + userInfo.creditLimit;

                }, 500); // 模拟网络延迟
            }

            // 模拟从数据库获取最近交易记录 (实际应用中应通过API获取)
            function fetchRecentTransactions() {
                // 模拟异步获取交易记录
                setTimeout(() => {
                    const transactions = [
                        {
                            type: 'transfer',
                            time: '2025-06-17 10:30',
                            description: '向李四转账',
                            amount: '-1,200.00',
                            class: 'expense'
                        },
                        {
                            type: 'deposit',
                            time: '2025-06-16 15:45',
                            description: '工资收入',
                            amount: '+5,800.00',
                            class: 'income'
                        },
                        {
                            type: 'withdraw',
                            time: '2025-06-15 09:10',
                            description: 'ATM取现',
                            amount: '-800.00',
                            class: 'expense'
                        },
                        {
                            type: 'transfer',
                            time: '2025-06-14 14:20',
                            description: '收到王五转账',
                            amount: '+2,500.00',
                            class: 'income'
                        },
                        {
                            type: 'repayment',
                            time: '2025-06-13 11:00',
                            description: '信用卡还款',
                            amount: '-1,500.00',
                            class: 'expense'
                        }
                    ];

                    const transactionList = document.querySelector('.transaction-list');
                    transactions.forEach(transaction => {
                        const item = document.createElement('li');
                        item.className = 'transaction-item reveal';

                        item.innerHTML = `
                            <div class="transaction-info">
                                <div class="transaction-icon ${transaction.type}">
                                    <i class="fa ${getIcon(transaction.type)}"></i>
                                </div>
                                <div class="transaction-details">
                                    <h4>${transaction.description}</h4>
                                    <p>${transaction.time}</p>
                                </div>
                            </div>
                            <div class="transaction-amount ${transaction.class}">${transaction.amount}</div>
                        `;

                        transactionList.appendChild(item);
                    });

                    // 触发动画
                    revealElements();

                }, 800); // 模拟网络延迟
            }

            // 获取交易类型对应的图标
            function getIcon(type) {
                switch(type) {
                    case 'transfer': return 'fa-exchange';
                    case 'deposit': return 'fa-money';
                    case 'withdraw': return 'fa-credit-card';
                    case 'repayment': return 'fa-credit-card';
                    default: return 'fa-question';
                }
            }

            // 页面加载时获取用户信息和交易记录
            fetchUserInfo();
            fetchRecentTransactions();
        });
    </script>
</head>
<body>
    <!-- 导航栏 - 与首页一致，但显示用户信息和退出按钮 -->
    <div class="nav">
        <div class="logo">
            <i class="fa fa-university" style="font-size:24px;color:#007bff;"></i>
            <span>安心银行</span>
        </div>
        <div class="menu">
            <a href="#function-menu">功能菜单</a>
            <a href="#transactions">交易记录</a>
            <a href="#">账户管理</a>
            <a href="#">安全中心</a>
        </div>
        <div class="btn-group">
            <span class="username" style="margin-right: 10px;">欢迎，<span id="user-name">用户</span></span>
            <a href="#" class="btn-logout">退出</a>
        </div>
    </div>

    <div class="container">
        <!-- 用户信息区域 -->
        <div class="user-profile reveal">
            <div class="profile-header">
                <div class="user-avatar reveal">U</div>
                <div class="user-info reveal">
                    <h2>用户</h2>
                    <p>待加载手机号...</p>
                </div>
            </div>
            <div class="account-summary">
                <div class="summary-item reveal" style="transition-delay: 0.1s;">
                    <h4>账户余额</h4>
                    <p>¥ 待加载...</p>
                </div>
                <div class="summary-item reveal" style="transition-delay: 0.2s;">
                    <h4>储蓄存款</h4>
                    <p>¥ 待加载...</p>
                </div>
                <div class="summary-item reveal" style="transition-delay: 0.3s;">
                    <h4>信用额度</h4>
                    <p>¥ 待加载...</p>
                </div>
            </div>
        </div>

        <!-- 功能菜单区域 -->
        <div class="function-menu" id="function-menu">
            <h2 class="reveal">基础功能</h2>
            <div class="menu-grid">
                <div class="menu-item reveal" style="transition-delay: 0.1s;">
                    <i class="fa fa-exchange"></i>
                    <h3>快捷转账</h3>
                    <p>行内跨行，实时到账</p>
                </div>
                <div class="menu-item reveal" style="transition-delay: 0.2s;">
                    <i class="fa fa-money"></i>
                    <h3>账户查询</h3>
                    <p>余额明细，随时查看</p>
                </div>
                <div class="menu-item reveal" style="transition-delay: 0.3s;">
                    <i class="fa fa-credit-card"></i>
                    <h3>在线还款</h3>
                    <p>一键还款，避免逾期</p>
                </div>
                <div class="menu-item reveal" style="transition-delay: 0.4s;">
                    <i class="fa fa-file-text"></i>
                    <h3>流水打印</h3>
                    <p>在线申请，便捷获取</p>
                </div>
                <div class="menu-item reveal" style="transition-delay: 0.5s;">
                    <i class="fa fa-user"></i>
                    <h3>信息修改</h3>
                    <p>资料更新，安全便捷</p>
                </div>
                <div class="menu-item reveal" style="transition-delay: 0.6s;">
                    <i class="fa fa-lock"></i>
                    <h3>账户挂失</h3>
                    <p>异常挂失，资金保障</p>
                </div>
                <div class="menu-item reveal" style="transition-delay: 0.7s;">
                    <i class="fa fa-credit-card-alt"></i>
                    <h3>余额充值</h3>
                    <p>快速充值，即时到账</p>
                </div>
                <div class="menu-item reveal" style="transition-delay: 0.8s;">
                    <i class="fa fa-line-chart"></i>
                    <h3>投资理财</h3>
                    <p>多元产品，财富增值</p>
                </div>
            </div>
        </div>

        <!-- 最近交易记录 -->
        <div class="recent-transactions" id="transactions">
            <div class="transactions-header">
                <h2 class="reveal">最近交易</h2>
                <a href="#" class="view-more reveal">查看全部</a>
            </div>
            <ul class="transaction-list">
                <!-- 交易记录将通过JavaScript动态加载 -->
                <li class="transaction-item reveal" style="transition-delay: 0.1s;">
                    <div class="transaction-info">
                        <div class="transaction-icon transfer">
                            <i class="fa fa-exchange"></i>
                        </div>
                        <div class="transaction-details">
                            <h4>加载中...</h4>
                            <p>加载中...</p>
                        </div>
                    </div>
                    <div class="transaction-amount expense">加载中...</div>
                </li>
                <li class="transaction-item reveal" style="transition-delay: 0.2s;">
                    <div class="transaction-info">
                        <div class="transaction-icon deposit">
                            <i class="fa fa-money"></i>
                        </div>
                        <div class="transaction-details">
                            <h4>加载中...</h4>
                            <p>加载中...</p>
                        </div>
                    </div>
                    <div class="transaction-amount income">加载中...</div>
                </li>
                <li class="transaction-item reveal" style="transition-delay: 0.3s;">
                    <div class="transaction-info">
                        <div class="transaction-icon withdraw">
                            <i class="fa fa-credit-card"></i>
                        </div>
                        <div class="transaction-details">
                            <h4>加载中...</h4>
                            <p>加载中...</p>
                        </div>
                    </div>
                    <div class="transaction-amount expense">加载中...</div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>